<script setup lang="ts">
import {ref} from 'vue';
import {useRouter} from 'vue-router';
// 默认激活的菜单项
import {Coin, TakeawayBox,} from '@element-plus/icons-vue'
import {goToHref, HrefTypeEnum} from "@/utils/common-utils.ts";

const router = useRouter();

const isCollapse = ref(true)
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

</script>

<!-- 修改后的模板部分 -->
<template>
  <div class="main-box">
    <el-header class="main-header">
      <!-- 修改后的Header区域 -->
      <div class="header-content">
        <!-- Logo区域 -->
        <div class="logo-area">
          <img class="logo-img" src="@/assets/images/sys/favicon.jpg" alt="">
          <span class="logo-text">数据工厂</span>
        </div>

        <!-- 图标链接区域 -->
        <div class="icon-links">
          <!-- Gitee图标 -->
          <el-tooltip
              content="访问Gitee"
              placement="bottom"
              effect="light">
            <el-icon
                class="link-icon"
                :size="22"
                @click="goToHref(HrefTypeEnum.ONLINE_HREF,'https://gitee.com/sxgan')">
              <svg t="1756114323442" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="9546" width="200" height="200">
                <path
                    d="M511.573333 981.333333C252.586667 981.333333 42.666667 771.413333 42.666667 512.426667 42.666667 253.525333 252.586667 43.605333 511.573333 43.605333c258.944 0 468.864 209.92 468.864 468.906667S770.517333 981.333333 511.530667 981.333333zM748.8 460.373333h-266.24c-12.8 0-23.168 10.368-23.168 23.168v57.856c0 12.8 10.368 23.168 23.125333 23.168h162.133334c12.8 0 23.168 10.368 23.168 23.125334v11.605333c0 38.4-31.146667 69.461333-69.504 69.461333H378.368a23.168 23.168 0 0 1-23.125333-23.168V425.642667c0-38.357333 31.104-69.461333 69.461333-69.461334h324.096c12.8 0 23.168-10.368 23.168-23.168l0.042667-57.856c0-12.8-10.325333-23.168-23.125334-23.168H424.704a173.653333 173.653333 0 0 0-173.653333 173.653334v324.138666c0 12.8 10.325333 23.168 23.168 23.168h341.504a156.288 156.288 0 0 0 156.288-156.288v-133.12c0-12.8-10.368-23.168-23.168-23.168z"
                    fill="#2c2c2c" p-id="9547"></path>
              </svg>
            </el-icon>
          </el-tooltip>

          <!-- Github图标 -->
          <el-tooltip
              content="访问GitHub"
              placement="bottom"
              effect="light">
            <el-icon
                class="link-icon"
                :size="22"
                @click="goToHref(HrefTypeEnum.ONLINE_HREF,'https://github.com/sxgan-code')">
              <svg t="1756114393773" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="11303" width="200" height="200">
                <path
                    d="M20.48 503.72608c0 214.4256 137.4208 396.73856 328.94976 463.6672 25.8048 6.5536 21.87264-11.8784 21.87264-24.33024v-85.07392c-148.93056 17.44896-154.86976-81.1008-164.94592-97.52576-20.23424-34.52928-67.91168-43.33568-53.69856-59.76064 33.91488-17.44896 68.48512 4.42368 108.46208 63.61088 28.95872 42.88512 85.44256 35.6352 114.15552 28.4672a138.8544 138.8544 0 0 1 38.0928-66.7648c-154.25536-27.60704-218.60352-121.77408-218.60352-233.79968 0-54.31296 17.94048-104.2432 53.0432-144.54784-22.36416-66.43712 2.08896-123.24864 5.3248-131.6864 63.81568-5.7344 130.00704 45.6704 135.168 49.68448 36.2496-9.78944 77.57824-14.9504 123.82208-14.9504 46.4896 0 88.064 5.3248 124.5184 15.23712 12.288-9.4208 73.80992-53.53472 133.12-48.128 3.15392 8.43776 27.0336 63.93856 6.02112 129.4336 35.59424 40.38656 53.69856 90.76736 53.69856 145.24416 0 112.18944-64.7168 206.4384-219.42272 233.71776a140.0832 140.0832 0 0 1 41.7792 99.9424v123.4944c0.86016 9.87136 0 19.6608 16.50688 19.6608 194.31424-65.49504 334.2336-249.15968 334.2336-465.5104C1002.57792 232.48896 782.66368 12.77952 511.5904 12.77952 240.18944 12.65664 20.48 232.40704 20.48 503.72608z"
                    fill="#000000" opacity=".65" p-id="11304"></path>
              </svg>
            </el-icon>
          </el-tooltip>
        </div>
      </div>
    </el-header>
    <div class="main-content">
      <!-- 添加背景色到el-aside -->
      <el-aside class="aside-box">
        <!-- 添加高度100%确保填满 -->
        <el-menu
            :default-active="$route.path"
            text-color="#cccccc"
            class="el-menu-vertical-demo full-height-menu"
            @open="handleOpen"
            @close="handleClose"
            background-color="#1c2b36"
            router
        >
          <el-menu-item index="/main/datasource">
            <el-icon>
              <Coin/>
            </el-icon>
            <span>数据源管理</span>
          </el-menu-item>
          <el-menu-item index="/main/codegen">
            <el-icon>
              <TakeawayBox/>
            </el-icon>
            <span>代码生成</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main class="content-box">
        <router-view v-slot="{ Component }">
          <transition name="fade" mode="out-in">
            <!-- 确保单根节点 -->
            <component :is="Component" :key="$route.fullPath"/>
          </transition>
        </router-view>
      </el-main>
    </div>

  </div>
</template>

<style lang="scss">
.main-box {
  width: 100vw;
  height: 100vh; /* 确保容器高度填满视口 */
  color: rgb(255, 255, 255);
  font-family: "HarmonyOS Sans Thin", sans-serif;

  .main-header {
    background-color: rgb(54, 127, 169);
    display: flex;
    align-items: center;
    padding: 0 2rem;
    height: 6rem;

    .header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
    }

    .logo-area {
      display: flex;
      align-items: center;
      gap: 1.2rem;

      .logo-img {
        width: 4.5rem;
        height: 4.5rem;
        border-radius: 0.5rem
      }

      .logo-text {
        font-size: 20px;
        font-weight: bold;
        letter-spacing: 1px;
      }
    }

    .icon-links {
      display: flex;
      gap: 1.5rm;

      .link-icon {
        margin: 0 1rem;
        cursor: pointer;
        transition: all 0.3s ease;
        color: rgba(255, 255, 255, 0.85);

        &:hover {
          color: white;
          transform: scale(1.15);
        }

        svg {
          display: block; /* 确保SVG正确显示 */
        }
      }
    }
  }

  .main-content {
    width: 100vw;
    height: calc(100vh - 6rem);
    display: flex;
    flex-direction: row;

    .aside-box {
      width: 20rem;
      height: calc(100vh - 6rem);
      background-color: #1c2b36; /* 侧边栏背景色 */
      .el-menu-item {
        width: 20rem;
        background-color: #1c2b36; /* 侧边栏背景色 */
      }
    }

    /* 内容区域修复 */
    .content-box {
      height: calc(100vh - 6rem);
      width: calc(100vw - 20rem);
      color: #000; /* 文字颜色改为深色 */
      font-size: 1.6rem;
      overflow: auto; /* 允许内容滚动 */
    }
  }

}

/* 切换页面动效*/
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.2s;
}

.fade-enter-from, .fade-leave-to {
  opacity: 0;
}


</style>